<template>
    <div id="center">
        <div class="container" v-if="showJudje">
            <div class="person-info">
                <img :src="userMsg.headImg" class="per-img" alt="">
                <!-- <a href="/#/center" class="per-img" :style="{backgroundImage: 'url(' + userMsg.headImg + ')'}"></a> -->
                <div class="info">
                    <span class="nickname">{{userMsg.nickname}}</span>
                    <p class="sex">
                        <i class="el-icon-male"></i>
                    </p>
                    <div class="followBtn" @click="followFun()" v-if="followShow">{{follow}}</div>
                </div>
                <div class="per-right">
                    <router-link :to="{name: 'CenterFollower',params: { userId}}" custom v-slot="{navigate,isActive}">
                        <div>
                            <p @click="navigate" :class="isActive?'per-act-top':''" class="count">{{userMsg.fans}}</p>
                            <p @click="navigate" :class="isActive?'per-act-top':''" class="text">粉丝</p>
                        </div>
                    </router-link>
                    <router-link :to="{name: 'CenterFollow',params: { userId}}" custom v-slot="{navigate,isActive}">
                        <div>
                            <p @click="navigate" :class="isActive?'per-act-top':''" class="count">{{userMsg.attention}}</p>
                            <p @click="navigate" :class="isActive?'per-act-top':''" class="text">关注</p>
                        </div>
                    </router-link>
                    <router-link :to="{name: 'CenterRecipes',params: { userId}}" custom v-slot="{navigate,isActive}">
                        <div>
                            <p @click="navigate" :class="isActive?'per-act-top':''" class="count">{{userMsg.menuNum}}</p>
                            <p @click="navigate" :class="isActive?'per-act-top':''" class="text">菜谱</p>
                        </div>
                    </router-link>
                    <router-link :to="{name: 'CenterBill',params: { userId}}" custom v-slot="{navigate,isActive}">
                        <div>
                            <p @click="navigate" :class="isActive?'per-act-top':''" class="count">{{userMsg.menuFatherNum}}</p>
                            <p @click="navigate" :class="isActive?'per-act-top':''" class="text">菜单</p>
                        </div>
                    </router-link>
                </div>
            </div>
            <div class="per-nav">
                <ul v-if="navControl">
                  <!-- <router-link :to="'/centerPage/CenterSurvey/'+userId" custom v-slot="{navigate,isActive}">
                   <li @click="navigate" :class="isActive?'per-active':''">概况</li>
                   </router-link> -->
                    <router-link :to="'/centerPage/CenterRecipes/'+userId" custom v-slot="{navigate,isActive}">
                    <li @click="navigate" :class="isActive?'per-active':''">菜谱</li>
                    </router-link>
                    <router-link :to="'/centerPage/CenterBill/'+userId" custom v-slot="{navigate,isActive}">
                    <li @click="navigate" :class="isActive?'per-active':''">菜单</li>
                    </router-link>
                    <router-link :to="'/centerPage/CenterCollect/CollectRecipes/'+userId" custom v-slot="{navigate,isActive}">
                    <li @click="navigate" :class="isActive?'per-active':''">收藏</li>
                    </router-link>
                </ul>
                <ul v-if="!navControl">
                   <router-link :to="'/centerPage/CenterFollower/'+userId" custom v-slot="{navigate,isActive}">
                    <li @click="navigate" :class="isActive?'per-active':''">关注{{nameShow(userMsg)}}的人</li>
                    </router-link>
                    <router-link :to="'/centerPage/CenterFollow/'+userId" custom v-slot="{navigate,isActive}">
                    <li @click="navigate" :class="isActive?'per-active':''">{{nameShow(userMsg)}}关注的人</li>
                    </router-link>
                </ul>
            </div>
            <div class="per-wrap">
                 <router-view  @changeInfo="changeUserMsg"></router-view>
                 <!-- <div class="no-menu">暂无数据</div> -->
            </div>
        </div>
    </div>
</template>
<script>
import cookie from '../../../cookien'
export default {
  inject: ['reload'],
  data () {
    return {
      navControl: true,
      userId: 123,
      userMsg: '',
      follow: '互相关注',
      followShow: false,
      showJudje: false
    }
  },
  methods: {
    changeUserMsg () {
      this.getUserInfo(this.userId)
    },
    getUserMsg () {
      this.$axios({
        url: '/Menu/User/getUserInfo'
      }).then(data => {
        if (data.data.code === 200) {
          console.log(this.userMsg)
          this.userMsg = data.data.object
        } else {
          this.$message(data.message)
        }
      }).catch(err => {
        console.log(err.toString())
      })
    },
    getUserInfo (userId) {
      this.$axios({
        url: '/Menu/Visitor/findByUserId',
        method: 'get',
        params: {
          userId
        },
        headers: {
          token: cookie.getToken()
        }
      }).then(data => {
        if (data.data.code === 200) {
          console.log(data.data)
          this.userMsg = data.data.object
          this.showJudje = true
        } else {
          this.$message(data.message)
        }
      }).catch(err => {
        console.log(err.toString())
      })
    },
    judjeFollow (userOneId, userTwoId) {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/User/judgeOfAttention',
          method: 'post',
          params: {
            userOneId,
            userTwoId
          },
          headers: {
            token: cookie.getToken()
          }
        }).then(data => {
          if (data.data.code === 200) {
            resolve(data.data.object)
          } else {
            this.$message(data.message)
          }
        }).catch(err => {
          console.log(err.toString())
          reject(err)
        })
      })
    },
    async judjeFun () {
      const mySelf = await this.judjeFollow(this.$store.state.userMsg.userId, this.$route.params.userId)
      const otherSelf = await this.judjeFollow(this.$route.params.userId, this.$store.state.userMsg.userId)
      console.log(mySelf)
      console.log(otherSelf)
      if (mySelf === 1 && otherSelf === 1) {
        this.follow = '互相关注'
      } else if (mySelf === 1 && otherSelf !== 1) {
        this.follow = '已关注'
      } else {
        this.follow = '+ 关注'
      }
    },
    followFun () {
      this.$axios({
        method: 'post',
        url: '/Menu/User/attention',
        params: {
          userOneId: this.$store.state.userMsg.userId,
          userTwoId: this.$route.params.userId
        }
      }).then(data => {
        if (data.data.code === 200) {
          this.$message({
            message: data.data.message,
            type: 'success'
          })
          this.judjeFun()
          this.getUserInfo(this.userId)
        } else {
          this.$message({
            message: data.data.message,
            type: 'warn'
          })
        }
      }).catch(error => {
        console.log(error.toString())
      })
    }
  },
  updated () {
    console.log(this.userId)
    if (this.userId !== this.$route.params.userId) {
      this.userId = this.$route.params.userId
      this.getUserInfo(this.userId)
      this.judjeFun()
    }
    if (this.$route.params.userId === this.$store.state.userMsg.userId) {
      this.followShow = false
    } else {
      this.followShow = true
    }
    // console.log(location.href)
    // console.log('123')
    // console.log(this.$route.name)
    if (this.$route.name === 'CenterFollower' || this.$route.name === 'CenterFollow') {
      this.navControl = false
    } else {
      this.navControl = true
    }
  },
  mounted () {
    this.userId = this.$route.params.userId
    this.getUserInfo(this.$route.params.userId)
    this.judjeFun()
    if (this.$route.name === 'CenterFollower' || this.$route.name === 'CenterFollow') {
      this.navControl = false
    } else {
      this.navControl = true
    }
    if (this.$route.params.userId === this.$store.state.userMsg.userId) {
      this.followShow = false
    } else {
      this.followShow = true
    }
  },
  computed: {
    nameShow () {
      return (key) => {
        if (this.userId === this.$store.state.userMsg.userId) {
          return '我'
        } else {
          return key.nickname
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
#center{
    padding-top: 60px;
    .container{
        width: 1000px;
        margin: 0 auto;
        height:auto;
    }
    .person-info{
        margin: 40px 0 20px;
        padding-bottom: 40px;
        color: red;
        text-align: left;
        overflow: hidden;
        position: relative;
        .per-img{
            background:  no-repeat center center;background-size:cover;
            width: 120px;
            height: 120px;
            margin-right: 12px;
            border-radius: 50%;
            overflow: hidden;
            float: left;
        }
        .info{
            width: 480px;
            float: left;
            position: relative;
            .nickname{
                color: black;
                display: inline-block;
                max-width: 296px;
                margin-top: 9px;
                font-size: 20px;
                line-height: 24px;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                vertical-align: middle;
                &:hover{
                  cursor: normal;
                }
            }
            p{
                margin-top: 11px;
                i{
                    color: #75B5E7;
                    font-size:20px;
                    font-weight: bold;
                }
            }
            .followBtn{
                display:inline-block;
                position:absolute;
                right: 0;
                top: 0;
                width: 80px;
                height: 35px;
                line-height:35px;
                border-radius:4px;
                text-align: center;
                font-size: 15px;
                color:#333;
                border:1px solid #333;
                &:hover{
                    cursor: pointer;
                }
            }
        }
        .per-right{
            float: right;
            background-color: #F1F7FA;
            display: grid;
            grid-template-columns: repeat(4, 25%);
            place-content: space-around space-between;
            width: 320px;
            height: 62px;
            border-radius: 4px;
            background: #F1F7FA;
            text-align: center;
            .per-act-top{
                color: #ffaa00;
            }
            div{
                width: 79px;
                border-right: 1px solid #D1DFE6;
                color: #000;
                &:hover {
                    color:#ffaa00;
                    cursor: pointer;
                }
            }
            div:last-child{
                border-right: none;
                width: 80px;
            }
            .count {
                font-size: 15px;line-height: 15px;
            }
            .text{
                margin-top: 4px;
                font-size: 13px;
            }
        }
    }
    .per-nav{
        width: auto;
        ul{
            overflow: hidden;
            li{
                float: left;
                color: #383830;
                height: 42px;
                line-height: 42px;
                margin-right: 30px;
                &:hover{
                    color: #ffaa00;
                    cursor: pointer;
                }
            }
            .per-active{
                border-bottom: 2px
                solid #383830;
                font-weight: bold;
                color: #383830;
            }
        }
    }
    .per-wrap{
        width: 100%;
        .no-menu{
            width: 100%;
            margin: 80px 0 330px;
            font-size: 13px;
            text-align: center;
        }
    }
}

</style>
